<template>
	<button class="btn" :class="[
      typeClass,
      sizeClass,
      { 'btn-block': block },
      { 'is-disabled': disabled },
      { 'is-loading': loading },
      customClass
    ]" @click="handleClick" :disabled="disabled || loading">
		<!-- 加载状态图标 -->
		<template v-if="loading">
			<view class="loading-icon">
				<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" stroke-dasharray="40"
						stroke-dashoffset="0" stroke-linecap="round">
						<animate attributeName="stroke-dashoffset" from="0" to="80" dur="1.5s" repeatCount="indefinite">
						</animate>
					</circle>
				</svg>
			</view>
		</template>

		<!-- 图标 -->
		<view v-if="icon && !loading" class="btn-icon">
			<slot name="icon"></slot>
		</view>

		<!-- 按钮文本 -->
		<view class="btn-text" v-if="$slots.default && !loading">
			<slot></slot>
		</view>

		<!-- 徽章 -->
		<view v-if="badge" class="btn-badge">
			<view class="badge" :class="badgeType ? `badge-${badgeType}` : 'badge-primary'">
				{{ badge }}
			</view>
		</view>
	</button>
</template>

<script setup lang="ts">
	import { PropType } from 'vue'; 

	// 按钮类型
	type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'outline' | 'text';
	// 按钮尺寸
	type ButtonSize = 'sm' | 'base' | 'lg';
	// 徽章类型（同按钮类型）
	type BadgeType = ButtonType | '';

	// 组件属性
	const props = defineProps({
		// 按钮类型
		type: {
			type: String as PropType<ButtonType>,
			default: 'primary'
		},
		// 按钮尺寸
		size: {
			type: String as PropType<ButtonSize>,
			default: 'base'
		},
		// 是否为块级按钮（占满父容器宽度）
		block: {
			type: Boolean,
			default: false
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		// 是否加载中状态
		loading: {
			type: Boolean,
			default: false
		},
		// 徽章内容（数字或文本）
		badge: {
			type: [String, Number],
			default: ''
		},
		// 徽章类型
		badgeType: {
			type: String as PropType<BadgeType>,
			default: ''
		},
		// 自定义类名
		customClass: {
			type: String,
			default: ''
		},
		// 图标显示
		icon: {
			type: Boolean,
			default: false
		}
	});

	// 事件触发
	const emit = defineEmits<{
		(e: 'click', value: MouseEvent): void;
	}>();

	// 点击事件处理
	const handleClick = (e: MouseEvent) => {
		emit('click', e);
	};

	// 计算类型类名
	const typeClass = `btn-${props.type}`;

	// 计算尺寸类名（基础尺寸无额外类名）
	const sizeClass = props.size !== 'base' ? `btn-${props.size}` : '';
</script>

<style lang="scss" scoped>
	// 按钮内部元素布局
	.btn {
		gap: $spacing-xs; // 图标与文本间距
		position: relative; // 用于徽章定位

		// 加载图标样式
		.loading-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20rpx;
			height: 20rpx;
			color: currentColor; // 继承按钮文本颜色
		}

		// 图标样式
		.btn-icon {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		// 徽章定位
		.btn-badge {
			position: absolute;
			top: 15rpx;
			right: 30rpx;
			transform: translate(50%, -50%);
			.badge{
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		// 禁用状态补充样式
		&.is-disabled {
			opacity: 0.6;
			cursor: not-allowed;
			transform: none; // 取消hover时的变换
			box-shadow: none;
		}

		// 加载状态补充样式
		&.is-loading {
			cursor: wait;
		}
	}
</style>